<template>
    <div style="width: 1000px;">
        <div style="  text-align: center;font-size: 24px;padding: 30px">收藏夹</div>
        <ul class="me-allct-items">
            <li v-for="b in bookList" @click="" :key="b.id" class="me-allct-item">
                <router-link :to="{name:'bookInformation', params: {id:b.id}}">
                    <div class="me-allct-content">
                        <a class="me-allct-info">
                            <img class="me-allct-img"
                                 :src="b.cover"/>
                            <h3 class="me-allct-name">{{b.name}}</h3>
                        </a>
                    </div>
                </router-link>
                <div style="width: 100%;text-align: center">
                    <el-button type="danger" round @click="deletebyId(b.id)">删除记录</el-button>
                </div>
            </li>
        </ul>
        <div>
            <div v-if="loadState" style="padding: 20px;margin-left: 450px;" @click="loadMore()" >加载更多</div>
            <div v-else style="margin-left: 420px;padding: 20px;">已经加载全部内容！</div>
        </div>
    </div>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "Favorite",
        created() {
            this.handleClick()
        },
        data() {
            return {
                search: this.$route.query.title,
                bookList: [],
                currentPage: 1,
                pageSize: 12,
                total: 0,
                loadState:true
            }
        },
        methods: {
            handleClick() {
                this.currentPage= 1,
                    this.pageSize= 12,
                    this.total= 0,
                    this.loadState=true
                request.get("/favorite/", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    if (res.data.records.length<this.pageSize){
                        this.loadState = false
                    }
                    this.bookList = res.data.records
                    this.total = res.data.total
                })

            },
            loadMore() {
                request.get("/favorite/", {
                    params: {
                        pageNum: this.currentPage+1,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    if (res.data.records.length<this.pageSize){
                        this.loadState = false
                    }
                    this.bookList.push(...res.data.records)
                    this.total += res.data.total
                    this.currentPage++;
                })

            },
            deletebyId(id) {
                request.delete("/favorite/" + id).then(res => {
                    if (res.code == "0") {
                        this.$message({
                            type: "success",
                            message: "删除成功！"
                        })
                        this.$router.go(0)
                    } else {
                        this.$message({
                            type: "error",
                            message: "删除失败！"
                        })
                    }
                })

            },

        }

    }
</script>


<style scoped>
    .me-allct-body {
        margin: 60px auto 140px;
    }

    .me-allct-container {
        width: 1000px;
    }

    .me-allct-items {
        padding-top: 2rem;
    }

    .me-allct-item {
        width: 25%;
        display: inline-block;
        margin-bottom: 2.4rem;
        padding: 0 .7rem;
        box-sizing: border-box;
    }

    .me-allct-content {
        display: inline-block;
        width: 100%;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        transition: border-color .3s;
        text-align: center;
        padding: 1.5rem 0;
    }

    .me-allct-info {
        cursor: pointer;
    }

    .me-allct-img {
        margin: -40px 0 10px;
        width: 130px;
        height: 180px;
        vertical-align: middle;
        border-radius: 5%;

    }

    .me-allct-name {
        font-size: 14px;
        /*font-weight: 150;*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 4px;
    }

    .me-allct-description {
        min-height: 50px;
        font-size: 13px;
        line-height: 25px;
    }

    .me-allct-meta {
        font-size: 12px;
        color: #969696;
    }
</style>